<!--
 * @Author: slq
 * @Date: 2020-04-12 23:57:56
 * @LastEditTime: 2022-05-23 13:10:50
 * @LastEditors: slq slq@iplusu
 * @Description: In User Settings Edit
 -->
<template>
  <div class="table-cell-item">
    <div class="item mt-10">
      <div class="title">计划:</div>
      <div class="num text-color-Aad1ea">{{ rows.planCount }}</div>
    </div>
    <div class="item">
      <div class="title">实际:</div>
      <div class="num text-color-O28bd6">{{ rows.acCount  }}</div>
    </div>
    <div class="item warning">
      <div class="title">预警:</div>
      <Popover trigger="hover" placement="top" v-show="rows.warningList.length">
        <table class="table">
          <thead>
            <th>序号</th>
            <th style="text-align: center">采购包编号</th>
             <th style="text-align: center">名称</th>
          </thead>
          <tbody>
            <tr v-for="(item, index) in rows.warningList" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.wbscc }}</td>
              <td>{{ item.cjdmpn }}</td>
            </tr>
          </tbody>
        </table>
        <div class="num text-color-Ffc821" slot="reference">
          {{ rows.warningList.length }}
        </div>
      </Popover>
      <div v-if="!rows.warningList.length" class="num text-color-Ffc821">
        {{ rows.warningList.length }}
      </div>
    </div>
  </div>
</template>
<script>
import { Popover } from 'element-ui'
export default {
  name: 'SupplyChainMonitoringTableCell',
  components: {
    Popover
  },
  props: {
    rows: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.table-cell-item {
  height: 100px;
  align-items: flex-end;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  padding-bottom: 10px;
  .warning {
    cursor: pointer;
  }
  .item {
    display: flex;
    height: 36px;
    line-height: 36px;
    .title {
      color: #fff;
      font-size: 13px;
      padding-left: 20px;
      flex: 1;
      text-align: left;
    }
    .num {
      font-size: 14px;
      font-weight: 600;
      flex: 1;
      padding-right: 20px;
      text-align: right;
    }
  }
}
.cell-inner {
  padding-left: 10px;
  margin-right: 10px;
  .projectName {
    margin-top: 18px;
    cursor: pointer;
    font-size: 14px;
    color: #cccccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .present-status {
    height: 20px;
    display: flex;
    .present {
      flex: 1;
      font-size: 12px;
      color: #cccccc;
      span {
        font-size: 12px;
        color: #000000;
      }
    }
    .status {
      width: 70px;
      text-align: right;
      span {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 5px;
        border-radius: 4px;
        background: #d9d9d9;
      }
      .green {
         box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
        background: #55aa00;
      }
      .red {
         box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
      background-color: rgb(255, 0, 0);
    }
    .yellow {
       box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
      background-color: rgba(255, 255, 0, 1);
    }
    }
  }
  .should,
  .practically {
    display: flex;
    .text {
      color: #cccccc;
      width: 30px;
      font-size: 12px;
    }
    .presennt {
      flex: 1;
      margin-top: 5px;
      height: 12px;
      background: #bfbfbf;
      .presennt-inner {
        background: red;
        height: 100%;
      }
      .presennt-inner-should {
        border-radius: 0 2px 2px 0;
        background: #a0cbe8;
        width: 26%;
      }
      .presennt-inner-practically {
        border-radius: 0 2px 2px 0;
        background: #008ad6;
        width: 24%;
      }
    }
    .num {
      font-size: 12px;
      width: 30px;
      text-align: center;
    }
  }
}
</style>
